<template>
	<view>
		<view class="content">
			<form @submit="formSubmit">
				<view class="phone-box">
					<text class="phone">+86</text>
					<input name="phone" type="number" placeholder="请输入手机号" maxlength="11" class="number" @input="isPhone" />
				</view>
				<view v-if="imageCodeData" class="phone-box phone-box-buttom">
					<input name="imageCode" type="text" placeholder="输入图片验证码" class="number" @input="inputImageCode" />
					<image @click="refreshImageCode" class="code-image" :src="imageCodeData" />
				</view>
				<view class="phone-box phone-box-buttom">
					<input name="phoneCode" placeholder="请输入验证码" class="number" placeholder-style="color:#bbb" @input="yanLoveInput" />
					<view @click="yanLoveBtn" class="getNum">{{ getText2 }}</view>
				</view>
				<button formType="submit" class="subBtn">登录柔宇星球</button>

				<view class="serve-info">点击登录柔宇星球，即表示已阅读并同意</view>
				<view class="serve-text">
					<view @tap="goToPage('https://www.royole.com/cn/privacy')">《隐私政策》</view>
					<view @tap="goToPage('https://www.royole.com/cn/agreement')">《用户协议》</view>
				</view>
			</form>
		</view>
	</view>

</template>

<script>
	import {
		$storage
	} from '@/utils'
	export default {
		data() {
			return {
				remove: false,
				user: {},
				// 验证手机号
				loginPhone: false,
				loginPwd: false,
				loveChange: true,
				imageCode: '',
				hongyzphone: '',
				// 验证码是否正确
				zhengLove: true,
				huoLove: '',
				getText2: '获取验证码',
				lovePhone: false,
				imageCodeData: ''
			};
		},
		created: function() {
			console.log('onshow')
		},
		methods: {
			goToPage(url) {
			console.log(url)
			  wx.navigateTo({
			    url: '/pages/webview?url=' + encodeURI(url)
			  });
			},
			inputImageCode(e) {
				const image = e.detail.value
				this.imageCode = image
			},
			// 手机验证
			isPhone(e) {
				const phone = e.detail.value
				this.hongyzphone = phone
				if (!/^1[3456789]\d{9}$/.test(phone)) {
					this.lovePhone = false
					console.log(phone.length)
					if (phone.length >= 11) {
						uni.showToast({
							title: '手机号有误',
							icon: 'none',
							duration: 1000,
						})
					}
				} else {
					this.lovePhone = true;
					this.getRouyuImageCode(phone)
				}
			},
			// 验证码输入
			yanLoveInput(e) {
				const that = this
				const yanLove = e.detail.value
				const huoLove = this.huoLove
				this.yanLove = yanLove
				this.zhengLove = false
				if (yanLove.length >= 4) {
					if (yanLove == huoLove) {
						this.zhengLove = true
					} else {
						this.zhengLove = false
					}
				}
			},
			// 验证码按钮
			  yanLoveBtn () {
			    const loveChange = this.loveChange
			    const lovePhone = this.lovePhone
			    const phone = this.hongyzphone
			    const image_code = this.imageCode
			    console.log(phone)
			    let n = 59
			    const that = this
			    if (!lovePhone) {
			      wx.showToast({
			        title: '手机号有误',
			        icon: 'none',
			        duration: 1000,
			      })
			      return
			    } else if(!image_code) {
			      wx.showToast({
			        title: '请填写图片验证码',
			        icon: 'none',
			        duration: 1000,
			      })
			      return
			    } else {
				
			      if (loveChange) {
					this.loveChange = false
					let _this = this;
			        const lovetime = setInterval(function () {
			          const str = '(' + n + ')' + '重新获取'
					  _this.getText2 = str;
			          if (n <= 0) {
						_this.loveChange = true;
						_this.getText2 = '重新获取'
			            clearInterval(lovetime)
			          }
			          n--
			        }, 1000)
			
			        //获取验证码接口+++++++++++++++++++++++++++++++++++
			        this.$u.api.rouyuVerifiableCode({ phone, image_code, purpose: 6, type: 0 })
			      }
			    }
			  },
			  refreshImageCode() {
			      this.getRouyuImageCode(this.hongyzphone)
			    },
			async getRouyuImageCode(phone) {
				const res = await this.$u.api.rouyuVerifiableCode({
					phone,
					type: 3,
					purpose: 5
				})
				const {
					data
				} = res;
				this.imageCodeData = data
			},
			//form表单提交
			  async formSubmit(e) {
				  
			    const { phone, phoneCode } = e.detail.value
			    if (!phone || !phoneCode) return
			    try {
			      const verifyResult = await this.$u.api.rouyuVerifyCode({
			        phone,
			        purpose: 6,
			        type: 0,
			        code: phoneCode
			      })
			      console.log(verifyResult)
			      const wechatLoginCode = $storage.get('wechat-login-code')
			      const payload = $storage.get('registerInfo')
			
			      this.$u.api.bindOtherPhone({ phone, code: wechatLoginCode, verifiable_code: phoneCode, ...payload })
			        .then(async (res) => {
			          $storage.set('accessToken', res.token, {
			          	expires: res.expires_in,
			          })
			          $storage.set('passportToken', res.passport_token, {
			          	expires: res.expires_in,
			          })
					  const user = await this.$u.api.getCurrentUser();
					  $storage.set("user", user);
			          $storage.remove('registerInfo')
			          $storage.remove('wechat-login-code')
			          uni.$emit('after:login')
					  uni.$emit('login:close')
			          uni.navigateBack({
			            delta: 2
			          })
			        })
			        .catch(() => {
			          uni.showToast({
			            icon: 'none',
			            title: "手机注册失败"
			          })
			        })
			    } catch (e) {
			      uni.showToast({
			        title: '验证错误',
			        icon: 'none'
			      })
			    }
			  },
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;

		padding: 0 50rpx;
		// box-sizing: border-box;
	}

	.phone-box {
		width: 100%;
		// height: 89rpx;
		border-bottom: 1rpx solid #efefef;
		display: flex;
		flex-direction: row;
		// justify-content: space-between;
		align-items: center;
		// background-color: yellow;

		padding: 40rpx 0 20rpx 42rpx;

		.code-image {
			width: 180rpx;
			height: 60rpx;
		}
	}

	.phone-box-buttom {
		justify-content: space-between;
	}

	.phone {
		color: #333;
		margin-right: 60rpx;
		font-size: 28rpx;
	}

	.number {
		color: #333;
		font-size: 28rpx;
		width: 200rpx;
	}

	.getNum {
		width: 210rpx;
		height: 48rpx;
		color: #0046f5;
		border-radius: 8rpx;
		font-size: 28rpx;
		font-family: ryfont;
		line-height: 48rpx;
		margin-right: 36rpx;
		text-align: center;
	}

	.subBtn {
		width: 642rpx;
		height: 88rpx;
		margin-top: 60rpx;
		border-radius: 44rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		color: #fff;
		background-color: #0046f5;
		font-size: 36rpx;
		margin-top: 100rpx;
	}

	.serve-info {
		font-size: 22rpx;
		margin-top: 50rpx;
		text-align: center;
	}

	.serve-text {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 22rpx;
		color: #6079b8;
	}
</style>
